<script setup lang="ts">
const props = defineProps(['data'])

// 改变动态数组的位置
import { useDymicComponentStore } from '@/stores/modudels/dymicComponent'

const dymicComponentStore = useDymicComponentStore()
//置顶
const topping = () => {
  dymicComponentStore.topping(props.data.order)
}
// 上移
const moveUp = () => {
  console.log('props.data:', props.data)
  console.log('dymicComponentStore.displayContent:', dymicComponentStore.displayContent)
  dymicComponentStore.moveUp(props.data.order)
  console.log('dymicComponentStore.displayContent:', dymicComponentStore.displayContent)
}
// 下移
const moveDown = () => {
  dymicComponentStore.moveDown(props.data.order)
}
// 删除
const remove = () => {
  dymicComponentStore.remove(props.data.order)
}
</script>

<template>
  <div class="big_img_layout">
    <div class="header_layput">
      <span class="title">大图</span>
      <div class="button_layout">
        <el-button @click="topping">置顶</el-button>
        <el-button @click="moveUp">上移</el-button>
        <el-button @click="moveDown">下移</el-button>
        <el-button @click="remove">删除</el-button>
      </div>
    </div>

    <!-- <el-image :src="data" fit="fill"></el-image> -->
    <el-image class="img_class" :src="props.data.baseData" fit="fill"></el-image>
  </div>
</template>

<style scoped>
.big_img_layout {
  width: 600px;
  height: 400px;
  display: flex;
  flex-direction: column;
  .header_layput {
    display: flex;
    justify-content: space-between;
    .title {
      font-size: 25px;
      margin-bottom: 10px;
    }
  }

  .img_class {
    width: 100%;
    height: 100%;
    margin-bottom: 20px;
  }
}
</style>
